<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-14 17:15:29
-->
<template>
  <div class="room_page">
    <van-sticky>
      <van-nav-bar
        title=""
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <span style="color: #fff" v-if="isShow">
            录播 <van-icon name="play-circle-o"
          /></span>
        </template>
      </van-nav-bar>

      <!-- <livePalyer></livePalyer> -->

      <xgPlayer
        ref="myPlayer"
        @changeShowBlackViweBtn="changeShowBlackViweBtn"
        @handleLeaveRoom="handleLeaveRoom"
        @handleDisconnectChartRoom="handleDisconnectChartRoom"
      ></xgPlayer>

      <van-tabs v-model:active="active">
        <van-tab title="聊天室"> </van-tab>
        <van-tab title="成员"> </van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 消息 -->
    <chatPanel
      ref="chatPanel"
      v-show="active === 0"
      @handleGetRoomMember="handleGetRoomMember"
    ></chatPanel>
    <!-- 成员 -->
    <memberPanel v-show="active === 1" :members="members"></memberPanel>
    <!-- 录播 -->
    <backView ref="backView"></backView>
  </div>
</template>



<script >
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import livePalyer from "./livePalyer.vue";
import xgPlayer from "./xgPlayer.vue";
import chatPanel from "./chatPanel.vue";
import memberPanel from "./memberPanel.vue";
import backView from "./backView.vue";
import { Dialog } from "vant";
export default defineComponent({
  components: {
    livePalyer,
    xgPlayer,
    chatPanel,
    memberPanel,
    backView,
  },
  setup() {
    const router = useRouter();
    const active = ref(0);
    const chatPanel = ref();
    const isShow = ref(false); //是否显示录播
    const onClickLeft = () => {
      Dialog.confirm({
        title: "提示",
        message: "确定离开直播间？",
      })
        .then(() => {
          chatPanel.value.handleLeaveRoom();
          setTimeout(() => {
            router.push("/live");
          }, 1000);
        })
        .catch(() => {
          // on cancel
        });
    };
    const members = ref([]);
    const handleGetRoomMember = (data) => {
      members.value = data;
    };

    const myPlayer = ref();

    const csTabId = ref(null);
    const changeShowBlackViweBtn = (v, id) => {
      isShow.value = v;
      csTabId.value = id;
    };

    // 录播
    const backView = ref();
    const onClickRight = () => {
      backView.value.show = true;
      backView.value.init(csTabId.value);
    };

    // 取消离开直播间
    const handleLeaveRoom = () => {
      chatPanel.value.handleLeaveRoom&&chatPanel.value.handleLeaveRoom();
      setTimeout(() => {
        router.push("/live");
      }, 1000);
    };
    // 断开聊天室
    const handleDisconnectChartRoom = () =>{
       chatPanel.value.handleLeaveRoom&&chatPanel.value.handleLeaveRoom();
    }

    return {
      backView,
      isShow,
      myPlayer,
      chatPanel,
      active,
      members,
      onClickLeft,
      onClickRight,
      handleGetRoomMember,
      changeShowBlackViweBtn,
      handleLeaveRoom,
      handleDisconnectChartRoom
    };
  },
});
</script>






<style lang="scss" scoped>
.room_page {
  overflow: hidden;
}
.van-tab__panel,
.van-tab__panel-wrapper {
  background: #191c26;
  color: #fff;
}
::v-deep(.van-tab) {
  background: #111937;
  color: #fff;
}
</style>